<template>
  <div>
    <TopNav title="发布房源"></TopNav>
    <van-form @submit="onSubmit">
      <van-field class="housing" :disabled="true" name="housing" label="房源信息" />
      <van-field class="community" v-model="community" :disabled="true" name="community" label="小区名称" right-icon="arrow" :placeholder="communityName" input-align="right" @click="searchcommunity" />
      <van-cell-group class="textfather">
        <van-field class="rent" v-model="rent" name="rent" label="租金" placeholder="请输入租金/月" :rules="[{ required: true, message: '请填写租金' }]" />
        <p class="text">￥/月</p>
      </van-cell-group>
      <van-cell-group class="textfather">
        <van-field class="rent" v-model="area" name="area" label="建筑面积" placeholder="请输入建筑面积" :rules="[{ required: true, message: '请填写租金' }]" />
        <p class="text">m²</p>
      </van-cell-group>
      <van-cell is-link @click="showPopup_shape" title="户型" :value="title_door_model"></van-cell>
      <van-popup position="bottom" v-model="show_shape" round>
        <van-picker title="户型" show-toolbar :columns="door_model" @confirm="onConfirmDoorModel" @cancel="onCancel" />
      </van-popup>
      <van-cell is-link @click="showPopup_layer" title="所在楼层" :value="title_floor"></van-cell>
      <van-popup position="bottom" v-model="show_layer" round>
        <van-picker title="标题" show-toolbar :columns="floor" @confirm="onConfirmFloor" @cancel="onCancel" />
      </van-popup>
      <van-cell is-link @click="showPopup_bearing" title="朝向" :value="title_toward"></van-cell>
      <van-popup position="bottom" v-model="show_bearing" round>
        <van-picker title="标题" show-toolbar :columns="toward" @confirm="onConfirmToward" @cancel="onCancel" />
      </van-popup>
      <van-field class="housing black" :disabled="true" name="housing" label="房屋标题" />
      <van-cell-group>
        <van-field v-model="house_title" placeholder="请输入标题（例如：整租 小区名 2室 5000元）" />
      </van-cell-group>
      <van-field class="housing black" :disabled="true" name="housing" label="房屋图像" />
      <van-uploader v-model="fileList" :after-read="afterRead" />

      <van-field class="housing black" :disabled="true" name="housing" label="房屋配置" />
      <van-grid :border="false" :column-num="5">
        <van-grid-item v-for="(item, index) in house_configuration" :key="index" @click="item.class = !item.class" :class="{active: item.class === true}" :icon="item.icon" :text="item.text" />
      </van-grid>

      <van-field class="housing black" :disabled="true" name="housing" label="房屋描述" />
      <van-cell-group>
        <van-field v-model="house_describe" type="textarea" placeholder="请输入房屋描述信息" />
      </van-cell-group>

      <div class="allButton" style="margin: 16px">
        <van-button type="default" @click="cancel">取消</van-button>
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import TopNav from '@/components/TopNav.vue'
import { Toast } from 'vant'
export default {
  data () {
    return {
      community: '',
      rent: '',
      area: '',
      show_shape: false,
      show_layer: false,
      show_bearing: false,
      door_model: ['一室', '二室', '三室', '四室', '四室+'],
      title_door_model: '',
      floor: ['高楼层', '中楼层', '低楼层'],
      title_floor: '',
      toward: ['东', '西', '南', '北', '东南', '东北', '西南', '西北'],
      title_toward: '',
      house_title: '',
      fileList: [
        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }
        // Uploader 根据文件后缀来判断是否为图片文件
      ],
      house_describe: '',
      house_configuration: [
        { icon: 'bag-o', text: '衣柜', class: false },
        { icon: 'tosend', text: '洗衣机', class: false },
        { icon: 'debit-pay', text: '空调', class: false },
        { icon: 'fire-o', text: '天然气', class: false },
        { icon: 'hotel-o', text: '冰箱', class: false },
        { icon: 'bar-chart-o', text: '暖气', class: false },
        { icon: 'tv-o', text: '电视', class: false },
        { icon: 'bulb-o', text: '热水器', class: false },
        { icon: 'cluster-o', text: '宽带', class: false },
        { icon: 'points', text: '沙发', class: false }
      ]
    }
  },
  computed: {
    communityName () {
      return this.$store.state.community.communityName ? this.$store.state.community.communityName : '请输入小区名称'
    }
  },
  components: {
    TopNav
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    },
    searchcommunity () {
      this.$router.push('/searchcommunity')
    },
    showPopup_shape () {
      this.show_shape = true
    },
    showPopup_layer () {
      this.show_layer = true
    },
    showPopup_bearing () {
      this.show_bearing = true
    },
    onConfirmDoorModel (value, index) {
      Toast(`当前：${value}`)
      this.title_door_model = value
      this.show_shape = false
    },
    onConfirmFloor (value, index) {
      Toast(`当前：${value}`)
      this.title_floor = value
      this.show_layer = false
    },
    onConfirmToward (value, index) {
      Toast(`当前：${value}`)
      this.title_toward = value
      this.show_bearing = false
    },
    onCancel () {
      this.show_layer = false
      this.show_shape = false
      this.show_bearing = false
      Toast('取消')
    },
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    cancel () {
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
.active {
  color: RGB(33, 185, 122);
  /deep/ .van-grid-item__text {
    color: RGB(33, 185, 122);
  }
}

/deep/ .housing {
  border-bottom: 0.5px solid RGB(245, 246, 247);
  span {
    color: RGB(33, 185, 122);
  }
}

/deep/ .black {
  span {
    color: RGB(100, 101, 102);
  }
}

/deep/ .community {
  span {
    color: RGB(100, 101, 102);
  }
}

/deep/ .van-cell__value {
  color: RGB(100, 101, 102);
}

/deep/ .textfather {
  position: relative;
  .text {
    position: absolute;
    right: 17px;
    bottom: -2px;
    color: RGB(100, 101, 102);
  }
}

/deep/ .van-cell-group {
  margin-bottom: 50px;
}

/deep/ .allButton{
  position: fixed;
  margin: 0px !important;
  bottom: 0px;
  left: 0;
  right: 0;
  width: 100%;
  display:flex;
  .van-button {
    border-radius: 0%;
    width: 50%;
    padding: 0px;
    margin: 0px;
  }
}
</style>
